<template>
  <div>
    <el-form v-if="device.map !== undefined" v-loading="classOperate" label-width="60px" label-position="left"
      style="text-align: center;">
      <el-row>
        <el-form-item label="上/下课">
          <el-col :span="10">
            <el-switch :value="device.map.classState == 1" />
          </el-col>
          <el-col :span="12">
            <el-button v-if="device.map.classState == 1" type="warning" icon="el-icon-hot-water"
              @click="handleCommand('OFF','class')">
              下课</el-button>
            <el-button v-else type="primary" icon="el-icon-bell" @click="handleCommand('ON','class')">
              上课</el-button>
          </el-col>
        </el-form-item>
        <el-col :span="12">
          <el-form-item label="OPS">
            <el-switch :value="device.map.ops == 1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电源">
            <el-switch :value="device.map.power1 == 1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button v-if="device.map.ops == 1" :disabled="opsOperate" type="warning" icon="el-icon-switch-button"
            @click="handleCommand('OPS_OFF','ops')">
            关</el-button>
          <el-button v-else :disabled="opsOperate" type="primary" icon="el-icon-switch-button"
            @click="handleCommand('OPS_ON','ops')">开</el-button>
        </el-col>
        <el-col :span="12">
          <el-button v-if="device.map.power1 == 1" :disabled="powerOperate" type="warning" icon="el-icon-switch-button"
            @click="handleCommand('POWER1_OFF','power')">关</el-button>
          <el-button v-else :disabled="powerOperate" type="primary" icon="el-icon-switch-button"
            @click="handleCommand('POWER1_ON','power')">开
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投影">
            <el-switch :value="device.map.projector == 1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="幕布">
            <span>{{ screenStatusArray[device.map.projectorScreen] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button v-if="device.map.projector == 1" :disabled="projectorOperate" type="warning"
            icon="el-icon-turn-off" @click="handleCommand('PROJECTOR_OFF','projector')">关
          </el-button>
          <el-button v-else :disabled="projectorOperate" type="primary" icon="el-icon-open"
            @click="handleCommand('PROJECTOR_ON','projector')">开</el-button>
        </el-col>
        <el-col :span="12">
          <el-button v-if="device.map.projectorScreen === 0" :disabled="projectorScreenOperate" type="primary"
            icon="el-icon-download" @click="handleCommand('P_S_DOWN','projectorScreen')">展开
          </el-button>
          <el-button v-else-if="device.map.projectorScreen === 3" :disabled="projectorScreenOperate" type="warning"
            icon="el-icon-upload2" @click="handleCommand('P_S_UP','projectorScreen')">收起
          </el-button>
          <el-button v-else type="info" disabled>{{ screenStatusArray[device.map.projectorScreen] }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert v-else :title="$t('Tips')" type="warning">{{ $t('Offline') }}</el-alert>
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  import deviceUdpAPI from '@/api/device/udp'

  export default {
    name: 'Controll0402Controller',
    mixins: [BaseController],
    data() {
      return {
        funcSpan: 8,
        screenStatusArray: ['收起的', '正在收起', '正在展开', '展开的'],
        classOperate: false,
        powerOperate: false,
        opsOperate: false,
        projectorOperate: false,
        projectorScreenOperate: false,
      }
    },
    methods: {
      setItemDevice(device) {},
      handleCommand(command, operate) {
        const vm = this
        const key = `${operate}Operate`
        this.$set(this, key, true)
        deviceUdpAPI.command(this.device.code, command).then(res => {
          vm.$message({
            type: 'success',
            message: '操作指令已发送,请等待设备响应'
          })
          setTimeout(function () {
            vm.$set(vm, key, false)
          }, 1000 * 2)
        }).catch(() => {
          setTimeout(function () {
            vm.$set(vm, key, false)
          }, 1000 * 2)
        })
      }
    }
  }

</script>
